<template>
	<div>
		<use-table ref="tbl"></use-table>
		<div class="container last_container use-table">
			<div class="dflex_sb margin_b_15 table-head">
				<el-button class="add-btn pos_r padding0" icon="iconfont iconxinzeng" @click="toAdd">新增</el-button>
			</div>
			<el-table ref="etbl" :height="tblHeight" v-loading="tableLoading" :data="tableDatas" highlight-current-row>
				<el-table-column property="name" label="名称" align="center"></el-table-column>
				<el-table-column property="phone" label="电话" align="center"></el-table-column>
				<el-table-column property="remark" label="备注" align="center"></el-table-column>
				<el-table-column property="state" label="状态" align="center">
					<template slot-scope="scope">
						<el-tooltip :open-delay="350" :content="scope.row.state == '显示' ? '点击隐藏' : '点击显示'"
							placement="top" :hide-after="1000" :enterable="false" effect="light">
							<el-switch v-model="scope.row.state" active-color="#ff6a6c" inactive-color="#bbb"
								active-value="启用" inactive-value="禁用" @change="stateChange(scope.row)"></el-switch>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-tooltip :open-delay="350" content="编辑" placement="top" :hide-after="1000" :enterable="false"
							effect="light">
							<el-button circle size="medium" icon="el-icon-edit" class="table-btn"
								@click="toEdit(scope.row._id)"></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
				<div slot="empty">
					<el-empty description=" "></el-empty>
				</div>
			</el-table>
			<el-pagination background :current-page="req.page" :page-sizes="[10, 20, 30, 50, 100]" :page-size="req.rows"
				layout="total, sizes, prev, pager, next, jumper" :total="tableTotal" @size-change="sizeChange"
				@current-change="currentChange"></el-pagination>
		</div>
	</div>
</template>

<script>
	const __name = 'wmz-pay-account';
	export default {
		data() {
			return {
				advancedSearch: false,
				stateOptions: [{
						value: '',
						label: '全部'
					},
					{
						value: '显示',
						label: '显示'
					},
					{
						value: '隐藏',
						label: '隐藏'
					}
				],
				req: {
					page: 1,
					rows: 10,
					orderby: 'sort asc',
					code: '',
					state: ''
				},
				tblHeight: 0,
				tableLoading: false,
				tableDatas: [],
				tableTotal: 0,
				selectDatas: [],
				searchBtnLoading: false,
				removesBtnLoading: false,
				sortLastTime: null
			};
		},
		methods: {
			async loadData(callback) {
				this.tableLoading = true;

				await this.$db[__name]
					.whereif(this.req.type, {
						type: new RegExp(this.$api.filterRegexpKey(this.req.type), 'i')
					})
					.whereif(this.req.state, {
						state: this.req.state
					})
					.totable(this.req)
					.then(res => {
						if (res.code == 200) {
							res.datas.rows.forEach((row, idx) => {
								row.previewImgs = [row.qrcode];
							});
							this.tableDatas = res.datas.rows;
							this.tableTotal = res.datas.total;

							if (typeof callback === 'function') {
								callback();
							}
						}
						this.searchBtnLoading = false;
						this.tableLoading = false;
					});
			},
			search() {
				this.req.page = 1;
				this.$api.storagePaginationPage(this.req.page, this.$route.path);
				this.searchBtnLoading = true;

				this.loadData(() => {
					this.$refs.etbl.bodyWrapper.scrollTop = 0;
				});

				uni.setStorage({
					key: '__search' + this.$route.path,
					data: this.req
				});
			},
			toAdd() {
				uni.navigateTo({
					url: `/pages/entitlement/add_pay_account?tab=添加`,
					events: {
						refreshData: () => {
							this.loadData();
						}
					}
				});
			},
			toEdit(id) {
				uni.navigateTo({
					url: `/pages/entitlement/add_pay_account?id=${id}&tab=编辑`,
					events: {
						refreshData: () => {
							this.loadData();
						}
					}
				});
			},
			async stateChange(row) {
				let res = await this.$func.wmzadmin.call('entitlement/updatePayAccount', row)
				if (res.code === 200) {
					this.$message("设置成功");
					this.loadData()
				} else {
					this.$message.error(res.msg);
					this.loadData()
				}
			},
			sizeChange(size) {
				this.$api.storagePaginationRows(size, this.$route.path);
				this.req.page = 1;
				this.$api.storagePaginationPage(this.req.page, this.$route.path);
				this.req.rows = size;

				this.loadData(() => {
					this.$refs.etbl.bodyWrapper.scrollTop = 0;
				});
			},
			currentChange(current) {
				this.$api.storagePaginationPage(current, this.$route.path);
				this.req.page = current;

				this.loadData(() => {
					this.$refs.etbl.bodyWrapper.scrollTop = 0;
				});
			}
		},
		created() {
			let __search = uni.getStorageSync('__search' + this.$route.path);
			if (__search) {
				this.req = __search;
				if (this.req.state) {
					this.advancedSearch = true;
				}
			}

			this.req.page = uni.getStorageSync('__paginationPage' + this.$route.path) || 1;
			this.req.rows = uni.getStorageSync('__paginationRows' + this.$route.path) || 10;

			this.loadData(() => {
				this.$nextTick(() => {
					this.$api.scrollToStorage('.el-table__body-wrapper', this.$route.path);
				});
			});
		},
		mounted() {
			this.$nextTick(() => {
				this.$api.scrollOnStorage('.el-table__body-wrapper', this.$route.path);
			});
		},
		updated() {
			if (!this.tblHeight) {
				this.tblHeight = this.$refs.tbl.tblHeight;
			}
		}
	};
</script>

<style></style>